<template>
  <div>
    <div>
      <yd-cell-item>
          <span slot="left">{{saleinfo.name}}</span>
        </yd-cell-item>
    </div>
      <div>
        <yd-cell-item>
          <span slot="left">购买数量</span>
          <span slot="right" style="margin-right:5px;"><span>{{spinner2}}</span>张</span>
        </yd-cell-item>
      </div>
      <!-- <div>
        <yd-cell-item arrow>
          <span slot="left">使用优惠券</span>
          <span slot="right">无</span>
        </yd-cell-item>
      </div> -->
      <div>
        <yd-cell-item>
          <span slot="left">订单总价</span>
          <span slot="right" style="margin-right:5px;color:#FF8800">￥{{saleinfo.guide_price*spinner2}}</span>
        </yd-cell-item>
      </div>
      <div style="border-top:10px solid #F0F0F0;border-bottom:10px solid #F0F0F0;">
        <yd-cell-item arrow>
          <span slot="left">{{this.mobile1}}</span>
          <div slot="right"  @click="show1 = true">选择手机号</div>
        </yd-cell-item>
      </div>
      <div>
        <yd-cell-group>
          <yd-cell-item>
            <hd-svg-icon name="hd-tishi" size="15px" slot="left"></hd-svg-icon>
            <span slot="left" style="margin-left:5px;">购买须知</span>
          </yd-cell-item>
        </yd-cell-group>
      </div>
      <div style="width:80%;margin-left:10%;font-size:.26rem">
        <span v-html="saleinfo.detail"></span>
      </div>
      <yd-tabbar fixed bgcolor="#ffffff">
        <div style="height:40px;width:62%;margin-left:15px;">
          <yd-spinner min="1" unit="1" v-model="spinner2"></yd-spinner>
        </div>
        <div style="height:40px;width:28%;">
          <!-- <router-link :to="{path:'blue_onlinebooking',query: {place_code:lastdata.place_code}}"> -->
            <yd-button type="warning" style="width:90%;margin-right:10px" @click.native="clickCreateOrderDiscount(saleinfo.guide_price)">￥{{saleinfo.guide_price*spinner2}} 提交订单</yd-button>
          <!-- </router-link> -->
        </div>
      </yd-tabbar>

      <!-- 输入手机号 -->
      <yd-popup v-model="show1" position="center" width="70%">
            <yd-cell-item style="height:60px;">
              <yd-input slot="right" v-model="mobile" regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>
            <div style="text-align:center">
              <div style="float:left;width:50%">
                  <yd-button @click.native="clickChangeMobile()" style="width:83%" type="warning">确定</yd-button>
              </div>
              <div style="float:left;width:50%">
                  <yd-button @click.native="show1 = false" style="width:83%" type="warning">取消</yd-button>
              </div>
            </div>
      </yd-popup>
  </div>
</template>
<script>
export default {
  name: 'blueordersubmit',
  data() {
    return {
      spinner2: 0,
      show1: false,
      mobile: '',
      mobile1: '',
      saleinfo: {}
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.mealsaleinfo,
        data: {
          code: this.$route.query.code
        },
        success: (resultData) => {
          this.saleinfo = resultData.data;
        }
      })
      this.hdAjax({
        url: this.API.myInfo,
        dataType: 'json',
        success: (resultData) => {
          if (resultData.status === 1) {
            if (resultData.result.mobile === '' || resultData.result.mobile === null) {
              this.$dialog.confirm({
                mes: '请先绑定手机号',
                opts: () => {
                  this.$dialog.toast({mes: '你点了确定', timeout: 1000});
                }
              });
            } else {
              this.mobile1 = resultData.result.mobile
            }
          }
        }
      })
    },
    clickCreateOrderDiscount(guideprice) {
      this.hdAjax({
        url: this.API.createOrderDiscount,
        data: {
          sale_code: this.$route.query.code,
          pay_fee: this.spinner2 * guideprice,
          num: this.spinner2,
          mobile: this.mobile1
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '提交成功!'})
        }
      })
    },
    clickChangeMobile() {
      if (!this.mobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      } else {
        this.mobile1 = this.mobile;
        this.show1 = false;
      }
    }
  }
}
</script>

